<template>
  <div class="blog-info-tags">
    <div class="category-span">
      <span ><el-icon :size="15"><Folder/></el-icon>  {{categoryList.list.length}} 分类</span>
    </div>
    <el-divider />
    <router-link class="category-link" :to="{path:'/category',query:{id:item.id}}" v-for="(item,index) in categoryList.list">
    <el-tag effect="dark" :size="'large'" style="margin-left: 5px"
            :type="color[index%5]">{{ item.name }}
    </el-tag>
    </router-link>
  </div>
</template>
<script setup lang="ts">

import {onMounted, ref} from "vue";
import {categoryList, tagList} from "@/store/customer/inedx";
const color = ref(['','success','info','warning','danger'])

// onMounted(()=>{
//   if(categoryList.list.length<=0){
//     categoryList.getCategoryList()
//   }
// })
</script>
<style scoped>
.category-span{
  margin-top: 15px;
  font-size: 20px;
}
.category-link:hover{
  background-color: white;
}
</style>